<template>
  <div class="classpagecontainer">
    <div class="content2">
      <!--模块名称-->
      <div class="title_tab">
        <div class="title_item" :class="{title_active:menu == 1}" @click="selectTab(1)">全部班级</div>
        <!-- <div
          style="margin-left:0.3rem;"
          class="title_item"
          :class="{title_active:menu == 3}"
          @click="selectTab(3)"
        >约课班级</div>-->
        <div
          style="margin-left:0.3rem;"
          class="title_item"
          :class="{title_active:menu == 2}"
          @click="selectTab(2)"
        >归档班级</div>
      </div>
      <!-- 搜索框-->
      <el-row>
        <el-col :span="22">
          <div class="search-box">
            <el-select
              v-if="menu == 1"
              style="width:2.03rem;float: left;margin-left:0rem;"
              @change="changeClassState"
              clearable
              v-model="classstatetext"
              placeholder="班级状态"
            >
              <el-option
                v-for="item in classstate"
                :key="item.value"
                :label="item.name"
                :disabled="item.value == 5"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select
              style="width:2.03rem;float: left;margin-left:.1rem;"
              clearable
              v-model="subjecttext"
              placeholder="科目"
            >
              <el-option
                v-for="item in subject"
                :key="item.subjectId"
                :label="item.name"
                :value="item.subjectId"
              ></el-option>
            </el-select>
            <el-select
              style="width:2.03rem;float: left;margin-left:.1rem;"
              clearable
              filterable
              v-model="courseId"
              placeholder="课程"
            >
              <el-option
                v-for="item in selectCourseList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-date-picker
              style="width:2.5rem;float: left;margin-left:.1rem; "
              clearable
              @change="changeDate"
              v-model="datetext"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>

            <el-input
              @keyup.enter.native="selectList(1)"
              style="width:3.5rem;float: left;margin-left:.1rem;"
              placeholder="班级名称\课程\教师"
              v-model="searchText"
              class="input-with-select"
            >
              <!--  <div class="prefixiconsearch"  @click="searchData(1)" slot="suffix"></div>  -->
            </el-input>
            <div
              class="search_btn"
              @click="selectList(1)"
              v-if="hasApi('getclassList')"
              style="margin-left:0.1rem;"
            >搜索</div>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="btnClass" v-if="hasApi('addClass')" @click="createNewClass">新建班级</div>
        </el-col>
      </el-row>
      <!--班级列表-->
      <el-row v-if="menu == 1">
        <div class="class_li" v-for="item in classlist">
          <div class="li_header">
            <el-row>
              <el-col :span="8">
                <div class="classtype">
                  <span>{{coursetypeObj[item.courseType]}}</span>
                  <!--<label v-if="item.courseType==4"><span>双师</span></label>
									<label v-else-if="item.courseType==2"><span>全日</span></label>
									<label v-else-if="item.courseType==3"><span>全日</span></label>
									<label v-else-if="item.courseType==5"><span>全日</span></label>
									<label v-else>
										<span v-if="item.classTypeMode==1">常规</span>
										<span v-else-if="item.classTypeMode==2">线上</span>
                  </label>-->
                </div>
                <div class="fileType">
                  <span class="text" v-if="item.classStatusMode==1">待开课</span>
                  <span class="text" v-else-if="item.classStatusMode==2">上课中</span>
                  <span class="text" v-else-if="item.classStatusMode==3">已结课</span>
                  <span class="text" v-else-if="item.classStatusMode==4">提前结课</span>
                  <!-- <span >已结课</span> -->
                  <span
                    @click="overClassType(item)"
                    class="label"
                    v-if="item.classStatusMode>=3 || (item.classStatusMode==1 && isOverTime(item)) "
                  >归档</span>
                </div>
              </el-col>
              <el-col :span="16">
                <!-- <div
                  class="operate"
                  v-if="(item.courseType==5||item.courseType==4) && hasApi('courseschedulinglist')"
                  @click="classtimesSet(item)"
                >
                  <img src="../../assets/img/common/classtimeicon.png" />
                  <span>课节设置</span>
                </div>-->
                <div
                  class="operate"
                  v-if="hasApi('courseschedulinglist')"
                  @click="syllabusDetails(item)"
                >
                  <img src="../../assets/img/common/classtimeicon.png" />
                  <span>课件详情</span>
                </div>
                <div
                  class="operate"
                  v-if="item.classStatusMode<=2&&hasApi('studentEnterClass')"
                  @click="enterClass(item)"
                >
                  <img src="../../assets/img/common/entry_icon.png" />
                  <span>进班</span>
                </div>
                <div
                  class="operate"
                  v-else-if="hasApi('studentEnterClass')"
                  style="cursor: not-allowed"
                >
                  <img src="../../assets/img/common/entericon.png" />
                  <span>进班</span>
                </div>
                <div
                  class="operate"
                  @click="ClassOrder(item)"
                  v-if="item.courseType==4 && hasApi('getfeiboSyllabusTeacherOrder')"
                >
                  <img src="../../assets/img/common/class_order_icon.png" />
                  <span>班级订单</span>
                </div>
                <div
                  class="operate"
                  @click="DateTeacher(item)"
                  v-if="item.courseType==4 && hasApi('savefeiboSyllabusTeacher')"
                >
                  <img src="../../assets/img/common/date_teacher_icon.png" />
                  <span>约名师</span>
                </div>

                <div
                  class="operate"
                  @click="teachingScheduleList(item)"
                  v-if="hasApi('courseschedulinglist')"
                >
                  <img src="../../assets/img/common/scheldulelist_icon.png" />
                  <span>排课列表</span>
                </div>
                <!--                v-if="item.classStatusMode==1&&hasApi('coursescheduling') && (item.useCourseHour||0 ==0)" -->
                <div
                  class="operate"
                  v-if="((item.classStatusMode==1 && (item.useCourseHour||0 ==0)) || item.courseType==2) && hasApi('coursescheduling')"
                  @click="teachingSchedule(item)"
                >
                  <img src="../../assets/img/common/schedule_icon.png" />
                  <span>排课</span>
                </div>
                <div
                  class="operate"
                  v-else-if="hasApi('coursescheduling')"
                  style="cursor: not-allowed"
                >
                  <img src="../../assets/img/common/selecticon_icon.png" />
                  <span>排课</span>
                </div>

                <div
                  class="operate"
                  v-if="item.classStatusMode<=2&&hasApi('editorClass')"
                  @click="editorClass(item)"
                >
                  <img src="../../assets/img/common/editor_icon.png" />
                  <span>编辑</span>
                </div>
                <div class="operate" v-else-if="hasApi('editorClass')" style="cursor: not-allowed">
                  <img src="../../assets/img/common/editor_icon_unsellect.png" />
                  <span>编辑</span>
                </div>
                <!-- v-if="(item.studentNum == null &&)" -->
                <div class="operate" @click="deleteClass(item)" v-if="!item.useCourseHour">
                  <img src="../../assets/img/common/course_delete.png" />
                  <span>删除</span>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="li_body">
            <el-row>
              <el-col :span="14">
                <div class="rate">
                  <percentChart
                    ref="percentChart"
                    :paras="{useCourseHour:item.useCourseHour,totalCourseHour:item.courseDateCount}"
                  ></percentChart>
                </div>
                <div class="classino">
                  <div
                    class="item"
                    v-clipboard:copy="'班级id:'+item.classId+',课程包id:'+item.coursePackageId"
                  >
                    <span>班级名称：</span>
                    <span
                      @click="showClassInfo(item)"
                      style="font-weight: bold;cursor: pointer;"
                    >{{item.className||""}}</span>
                  </div>
                  <div class="item">
                    <span>课程名称：</span>
                    <span>{{item.courseName||""}}</span>
                  </div>
                  <div class="item">
                    <span>班级编号：</span>
                    <span>{{item.classNo||""}}</span>
                  </div>
                  <div class="item">
                    <span>上课时间：</span>
                    <span>{{item.startTime||""}}</span>
                    <span>至&nbsp;{{item.endTime||""}}</span>
                  </div>
                </div>
                <div class="classino">
                  <div class="item">
                    <span>教室：</span>
                    <span>{{item.classRoomName||""}}</span>
                  </div>
                  <div class="item">
                    <span>教师：</span>
                    <span>{{item.teacherUserName||""}}</span>
                  </div>
                  <div class="item">
                    <span>助教：</span>
                    <span>{{item.assisUserName||""}}</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="1">
                <div class="verticalline"></div>
              </el-col>
              <el-col :span="9">
                <div class="lessoninfo" style="cursor: pointer;" @click="showStudentList(item)">
                  <div class="title">班级学员</div>
                  <div class="progress">
                    <span style="color:#FFB820;font-size:.38rem;">{{item.studentNum||"0"}}</span>
                    <span style="color:#DDDEE0;font-size: .38rem;">/</span>
                    <span style="color:#DDDEE0;font-size: .38rem;">{{item.recruitNum||"0"}}</span>
                  </div>
                  <div class="progresstext">已有学员/计划招生</div>
                </div>
                <div class="lessoninfo" style="margin-right:.5rem;">
                  <div class="title">班级进度</div>
                  <div class="progress">
                    <span style="color:#1FA0FE;font-size:.38rem;">{{item.useCourseHour||0}}</span>
                    <span style="color:#DDDEE0;font-size: .38rem;">/</span>
                    <span style="color:#DDDEE0;font-size: .38rem;">{{item.courseDateCount||0}}</span>
                  </div>
                  <div class="progresstext">
                    <span v-if="item.classStatusMode==1">待开课</span>
                    <span v-else-if="item.classStatusMode==2">上课中</span>
                    <span v-else-if="item.classStatusMode==3">已结课</span>
                    <span v-else-if="item.classStatusMode==4">提前结课</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <el-collapse-transition>
            <div class="studentlist" v-if="item.isShow">
              <div class="pageList">
                <div class="tablecss">
                  <table style="width:100%;" cellpadding="0" cellspacing="0">
                    <thead>
                      <tr>
                        <th>学员</th>
                        <!-- <th>课程名称</th> -->
                        <th>联系电话</th>
                        <th>年龄</th>
                        <th>进班日期</th>
                        <th v-if="item.courseType==2">数量(天)</th>
                        <th v-else-if="item.courseType==4">数量(节)</th>
                        <th v-else>数量(课时)</th>
                        <th>签到</th>
                        <th>请假</th>
                        <th>补课</th>
                        <!-- <th>迟到</th> -->
                        <th>旷课</th>
                        <th>学员状态</th>
                      </tr>
                    </thead>
                    <tbody v-if="item.studentlist.length>0">
                      <tr v-for="li in item.studentlist" :class="li.enterStyle">
                        <td align="center">
                          <span @click="studentDetail(li)" style="cursor: pointer;">{{li.realName}}</span>
                          <span v-if="li.genderMode==1">（男）</span>
                          <span v-if="li.genderMode==2">（女）</span>
                        </td>
                        <td align="center">{{li.phone}}</td>
                        <td align="center">{{li.age}}</td>
                        <td align="center">{{li.joinDate.split(' ')[0]}}</td>
                        <td align="center">{{li.courseTimes||0}}/{{item.courseDateCount||0}}</td>
                        <td align="center">{{li.siginTimes}}</td>
                        <td align="center">{{li.leaveTimes}}</td>
                        <td align="center">{{li.makeupTimes}}</td>
                        <!-- <td align="center">{{li.lateTimes}}</td> -->
                        <td align="center">{{li.absentTimes}}</td>
                        <td align="center">{{studenttuitionmode[li.studentTuitionMode]}}</td>
                        <!-- <td align="center">{{li.studentTuitionModeName}}</td>-->
                      </tr>
                    </tbody>
                    <tbody v-else>
                      <tr>
                        <td colspan="11" align="center">暂无数据</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </el-collapse-transition>
          <div class="shrink" v-if="item.isShow">
            <div class="shrinkicon" @click="shrinkStudentList(item)"></div>
          </div>
        </div>
      </el-row>
      <el-row v-else>
        <div class="class_li" v-for="item in classlist">
          <div class="li_header">
            <el-row>
              <el-col :span="8">
                <div class="classtype">
                  <span>{{coursetypeObj[item.courseType]}}</span>
                </div>
                <div class="fileType">
                  <span class="text" v-if="item.classStatusMode==1">待开课</span>
                  <span class="text" v-else-if="item.classStatusMode==2">上课中</span>
                  <span class="text" v-else-if="item.classStatusMode==3">已结课</span>
                  <span class="text" v-else-if="item.classStatusMode==4">提前结课</span>
                </div>
              </el-col>
              <el-col :span="16">
                <!-- <div
                  class="operate"
                  v-if="(item.courseType==5||item.courseType==4) && hasApi('courseschedulinglist')"
                  @click="classtimesSet(item)"
                >
                  <img src="../../assets/img/common/classtimeicon.png" />
                  <span>课节设置</span>
                </div>-->
                <div
                  class="operate"
                  v-if="hasApi('courseschedulinglist')"
                  @click="syllabusDetails(item)"
                >
                  <img src="../../assets/img/common/classtimeicon.png" />
                  <span>课件详情</span>
                </div>
                <!-- <div
                  class="operate"
                  v-if="item.classStatusMode<=2&&hasApi('studentEnterClass')"
                  @click="enterClass(item)"
                >
                  <img src="../../assets/img/common/entry_icon.png" />
                  <span>进班</span>
                </div>
                <div
                  class="operate"
                  v-else-if="hasApi('studentEnterClass')"
                  style="cursor: not-allowed"
                >
                  <img src="../../assets/img/common/entericon.png" />
                  <span>进班</span>
                </div>
                <div
                  class="operate"
                  @click="ClassOrder(item)"
                  v-if="item.courseType==4 && hasApi('getfeiboSyllabusTeacherOrder')"
                >
                  <img src="../../assets/img/common/class_order_icon.png" />
                  <span>班级订单</span>
                </div>
                <div
                  class="operate"
                  @click="DateTeacher(item)"
                  v-if="item.courseType==4 && hasApi('savefeiboSyllabusTeacher')"
                >
                  <img src="../../assets/img/common/date_teacher_icon.png" />
                  <span>约名师</span>
                </div>

                <div
                  class="operate"
                  @click="teachingScheduleList(item)"
                  v-if="hasApi('courseschedulinglist')"
                >
                  <img src="../../assets/img/common/scheldulelist_icon.png" />
                  <span>排课列表</span>
                </div>-->
                <!--                v-if="item.classStatusMode==1&&hasApi('coursescheduling') && (item.useCourseHour||0 ==0)" -->
                <div
                  class="operate"
                  v-if="(item.classStatusMode==1 && (item.useCourseHour||0 ==0)) && hasApi('coursescheduling')"
                  @click="teachingSchedule(item)"
                >
                  <img src="../../assets/img/common/schedule_icon.png" />
                  <span>排课</span>
                </div>
                <div
                  class="operate"
                  v-else-if="hasApi('coursescheduling')"
                  style="cursor: not-allowed"
                >
                  <img src="../../assets/img/common/selecticon_icon.png" />
                  <span>排课</span>
                </div>

                <div
                  class="operate"
                  v-if="item.classStatusMode<=2&&hasApi('editorClass')"
                  @click="editorClass(item)"
                >
                  <img src="../../assets/img/common/editor_icon.png" />
                  <span>编辑</span>
                </div>
                <div class="operate" v-else-if="hasApi('editorClass')" style="cursor: not-allowed">
                  <img src="../../assets/img/common/editor_icon_unsellect.png" />
                  <span>编辑</span>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="li_body">
            <el-row>
              <el-col :span="14">
                <div class="rate">
                  <percentChart
                    ref="percentChart"
                    :paras="{useCourseHour:item.useCourseHour,totalCourseHour:item.courseDateCount}"
                  ></percentChart>
                </div>
                <div class="classino">
                  <div
                    class="item"
                    v-clipboard:copy="'班级id:'+item.classId+',课程包id:'+item.coursePackageId"
                  >
                    <span>班级名称：</span>
                    <span
                      @click="showClassInfo(item)"
                      style="font-weight: bold;cursor: pointer;"
                    >{{item.className||""}}</span>
                  </div>
                  <div class="item">
                    <span>课程名称：</span>
                    <span>{{item.courseName||""}}</span>
                  </div>
                  <div class="item">
                    <span>班级编号：</span>
                    <span>{{item.classNo||""}}</span>
                  </div>
                  <div class="item">
                    <span>上课时间：</span>
                    <span>{{item.startTime||""}}</span>
                    <span>至&nbsp;{{item.endTime||""}}</span>
                  </div>
                </div>
                <div class="classino">
                  <div class="item">
                    <span>教室：</span>
                    <span>{{item.classRoomName||""}}</span>
                  </div>
                  <div class="item">
                    <span>教师：</span>
                    <span>{{item.teacherUserName||""}}</span>
                  </div>
                  <div class="item">
                    <span>助教：</span>
                    <span>{{item.assisUserName||""}}</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="1">
                <div class="verticalline"></div>
              </el-col>
              <el-col :span="9">
                <div class="lessoninfo" style="cursor: pointer;" @click="showStudentList(item)">
                  <div class="title">班级学员</div>
                  <div class="progress">
                    <span style="color:#FFB820;font-size:.38rem;">{{item.studentNum||"0"}}</span>
                    <span style="color:#DDDEE0;font-size: .38rem;">/</span>
                    <span style="color:#DDDEE0;font-size: .38rem;">{{item.recruitNum||"0"}}</span>
                  </div>
                  <div class="progresstext">已有学员/计划招生</div>
                </div>
                <div class="lessoninfo" style="margin-right:.5rem;">
                  <div class="title">班级进度</div>
                  <div class="progress">
                    <span style="color:#1FA0FE;font-size:.38rem;">{{item.useCourseHour||0}}</span>
                    <span style="color:#DDDEE0;font-size: .38rem;">/</span>
                    <span style="color:#DDDEE0;font-size: .38rem;">{{item.courseDateCount||0}}</span>
                  </div>
                  <div class="progresstext">
                    <span v-if="item.classStatusMode==1">待开课</span>
                    <span v-else-if="item.classStatusMode==2">上课中</span>
                    <span v-else-if="item.classStatusMode==3">已结课</span>
                    <span v-else-if="item.classStatusMode==4">提前结课</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <el-collapse-transition>
            <div class="studentlist" v-if="item.isShow">
              <div class="pageList">
                <div class="tablecss">
                  <table style="width:100%;" cellpadding="0" cellspacing="0">
                    <thead>
                      <tr>
                        <th>学员</th>
                        <!-- <th>课程名称</th> -->
                        <th>联系电话</th>
                        <th>年龄</th>
                        <th>进班日期</th>
                        <th v-if="item.courseType==2">数量(天)</th>
                        <th v-else-if="item.courseType==4">数量(节)</th>
                        <th v-else>数量(课时)</th>
                        <th>签到</th>
                        <th>请假</th>
                        <th>补课</th>
                        <!-- <th>迟到</th> -->
                        <th>旷课</th>
                        <th>学员状态</th>
                      </tr>
                    </thead>
                    <tbody v-if="item.studentlist.length>0">
                      <tr v-for="li in item.studentlist" :class="li.enterStyle">
                        <td align="center">
                          <span @click="studentDetail(li)" style="cursor: pointer;">{{li.realName}}</span>
                          <span v-if="li.genderMode==1">（男）</span>
                          <span v-if="li.genderMode==2">（女）</span>
                        </td>
                        <td align="center">{{li.phone}}</td>
                        <td align="center">{{li.age}}</td>
                        <td align="center">{{li.joinDate.split(' ')[0]}}</td>
                        <td align="center">{{li.courseTimes||0}}/{{item.courseDateCount||0}}</td>
                        <td align="center">{{li.siginTimes}}</td>
                        <td align="center">{{li.leaveTimes}}</td>
                        <td align="center">{{li.makeupTimes}}</td>
                        <!-- <td align="center">{{li.lateTimes}}</td> -->
                        <td align="center">{{li.absentTimes}}</td>
                        <td align="center">{{studenttuitionmode[li.studentTuitionMode]}}</td>
                        <!-- <td align="center">{{li.studentTuitionModeName}}</td>-->
                      </tr>
                    </tbody>
                    <tbody v-else>
                      <tr>
                        <td colspan="11" align="center">暂无数据</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </el-collapse-transition>
          <div class="shrink" v-if="item.isShow">
            <div class="shrinkicon" @click="shrinkStudentList(item)"></div>
          </div>
        </div>
      </el-row>
      <!--分页-->
      <el-row style="margin-top:.2rem;margin-bottom:.2rem;">
        <div class="pagePanel">
          <el-pagination
            class="page"
            @current-change="curChange"
            @size-change="pageSizeChange"
            :page-size="pager.pagesize"
            :current-page="pager.currpage"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pager.totalnum"
          ></el-pagination>
        </div>
      </el-row>
      <!--新建班级组件\编辑班级组件-->
      <createNewClass ref="createNewClass" :componentname="componentname"></createNewClass>
      <!--排课日历-->
      <Schedulecalendar ref="schedulecalendar" @callback="showOrderForeignComponents"></Schedulecalendar>
      <!--排课列表-->
      <TimetableList ref="timetablelist" @showOrderForeignSyllabuslist="showOrderForeignComponents"></TimetableList>
      <!--进班-->
      <studentEntry ref="studententry" @listenToChildEvent="entryCall"></studentEntry>
      <!--班级相册-->
      <classAlbum :componentname="componentname"></classAlbum>
      <!-- 班级详情-->
      <classdetail></classdetail>
      <!--学员信息框-->
      <studentdetails :studentdetailprop="studentInfo"></studentdetails>
      <!--课节设置-->
      <classtimes @callback="ShowPreviewResourceComponent" ref="classtime"></classtimes>
      <!--加载面板-->
      <loading ref="loading"></loading>
      <!-- 双师-约名师 -->
      <div class="box-orderForeign" v-show="orderForeignTeacherPopupVisible">
        <div class="box-title">
          <span
            class="gotoclass"
            @click="showOrderForeignComponents({teacher:{visible:false},syllabus:{visible:false},classorder:{visible:false}})"
          >班级管理</span>
          <i class="el-icon-arrow-right"></i>
          <span>约名师</span>
        </div>
        <orderForeignTeacherCom
          ref="orderForeignTeacherCom"
          :orderForeignTeacher="null"
          @cancel="()=>{this.orderForeignTeacherPopupVisible=false;}"
          @showOrderForeignSyllabuslist="showOrderForeignComponents"
        ></orderForeignTeacherCom>
      </div>
      <!-- 双师-班级订单 -->
      <div class="box-orderForeign" v-show="classOrderManagePopupVisible">
        <div class="box-title">
          <span
            class="gotoclass"
            @click="showOrderForeignComponents({teacher:{visible:false},syllabus:{visible:false},classorder:{visible:false}})"
          >班级管理</span>
          <i class="el-icon-arrow-right"></i>
          <span>班级订单</span>
        </div>
        <classOrderManageCom
          :orderForeignTeacher="null"
          ref="classOrderManageCom"
          @cancel="()=>{this.classOrderManagePopupVisible=false;}"
          @showOrderForeignSyllabuslist="showOrderForeignComponents"
        ></classOrderManageCom>
      </div>
    </div>
    <!--预览课程资源-->
    <!--<el-dialog class="PreviewContainerDialog" :before-close="Exit"  fullscreen :modal="false"  :visible.sync="PreviewResourceComponentVisible">
			<PreviewResourceComponent ref="PreviewResource"></PreviewResourceComponent>
    </el-dialog>-->
    <el-dialog
      :title="changeCourseAuth.isAuth?'授权课件':'取消授权课件'"
      :visible.sync="dialogFormVisible_coursechange"
      width="30%"
      top="10%"
      center
      :before-close="cancel_update"
      :close-on-click-modal="false"
    >
      <div style="padding: 0.1rem 0.6rem;font-size:0.16rem;">
        <div v-if="changeCourseAuth.isAuth">确定班级以下课程授权使用课件吗？</div>
        <div v-else>确定班级以下课程取消授权使用课件吗？</div>
        <div style="margin-top:0.1rem;">
          <span>{{changeCourseAuth.className}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span>{{changeCourseAuth.libraryCourseName}}</span>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel_update()">取 消</el-button>
        <el-button type="primary" @click="updateCofim()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="course_title"
      :visible.sync="dialogFormVisible_course"
      width="30%"
      custom-class="el-dialog-bg"
      :close-on-click-modal="false"
    >
      <div class="strong-tip">
        <div style="line-height:0.3rem;">V课堂课件使用提示：</div>
        <div>1、班级排课后不能修改课件授权设置</div>
        <div>2、在班级结束后30天，该班课件无法使用</div>
      </div>
      <div class="row_one" style="margin-bottom:0.1rem;">
        <el-input
          v-model="searchCourseLibrary"
          style="width:60%;"
          prefix-icon="el-icon-search"
          placeholder="输入库课程名称"
          class="input_search"
          @input="searchCourseName()"
        ></el-input>
        <!-- <div @click="searchCourseName()" class="search_btn" style="margin-left:0.1rem;">搜索</div> -->
      </div>

      <div>
        <table
          class="table"
          cellspacing="0"
          style="width:100%;margin-bottom:0.3rem;border: 1px solid #eeeeee;border-radius: 0.06rem;"
        >
          <tbody class="tbody" style="border-radius: 0.04rem;">
            <tr v-for="item,index in courseListByFull" style="cursor: pointer;">
              <td style="text-align: center;">
                <!--  @click.native="gotoSyllabus(item)" -->
                <div style="overflow: hidden;padding-left:0.14rem;" @click="gotoSyllabus(item)">
                  <div class="course_name">
                    {{item.libraryCourseName}}&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-checkbox
                      v-model="item.isAuthorized"
                      @click.stop.native="checkChange(item)"
                      v-if="item.isAuthorizeProtected == '1' && hasApi('classcourseauthorizeUpdate')"
                      :disabled="(item.availableAuthorizeClassAmount == 0 && item.classCourseAuthorize == null) || (item.availableAuthorizeClassAmount == 0 && item.classCourseAuthorize.isAuthorized == '0') || item.isNotStatus"
                    >授权使用课件</el-checkbox>
                  </div>
                  <el-tooltip
                    class="item"
                    effect="light"
                    placement="right"
                    v-if="item.isAuthorizeProtected == '1' && hasApi('classcourseauthorizeUpdate')"
                  >
                    <div slot="content">
                      提示：
                      <br />该复选框勾选，表示您授权
                      <br />此班级在V课堂教学客户端
                      <br />使用课件。
                      <br />复选框灰色，表示课件无授权
                      <br />名额，可联系督导老师进行
                      <br />相关咨询。
                    </div>
                    <div class="course_tips"></div>
                  </el-tooltip>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
import setCampusTime from "@/js/common/setCampusTime";
import createNewClass from "./common/createNewClass";
import courseScheduling from "./common/courseScheduling";
import TimetableList from "./common/TimetableList";
import studentEntry from "./common/studentEntry";
import classAlbum from "./common/classAlbum";
import percentChart from "./common/percentChart";
import classdetail from "./common/classdetail";
import studentdetails from "./common/studentdetails";
import classtimes from "./common/classtimes";
import Schedulecalendar from "./common/Schedulecalendar";
import loading from "../common/loading";
import orderForeignTeacherCom from "./common/orderForeignTeacher";
import classOrderManageCom from "./common/orderForeign_classOrderManage";
//	import PreviewResourceComponent from "../common/PreviewResourceComponent"
let vm;
export default {
  components: {
    createNewClass,
    courseScheduling,
    TimetableList,
    studentEntry,
    classAlbum,
    percentChart,
    classdetail,
    studentdetails,
    classtimes,
    Schedulecalendar,
    loading,
    orderForeignTeacherCom,
    classOrderManageCom

    //			PreviewResourceComponent
  },
  data() {
    return {
      isGotoResource: false,
      menu: 1, //菜单1、全部班级 2、归档班级
      studentInfo: null, //学员信息参数传递
      datetext: [], //查询班级日期
      loadingObj: null,
      componentname: "", //创建班级与编辑班级参数传递
      classinfo: null, //班级信息详情传递参数
      coursetypeObj: {}, //课程类型
      studenttuitionmode: {},
      searchCourseLibrary: "",
      dialogFormVisible_course: false, //全日制库课程数据显示/隐藏
      dialogFormVisible_coursechange: false,
      copyCourseListByFull: [], //复制全日制库课程数据
      courseListByFull: [], //全日制库课程数据
      course_title: "", //课程名称
      changeCourseAuth: {
        libraryCourseCampusList: []
      },
      pager: {
        //分页
        totalnum: 0,
        pagesize: 10,
        currpage: 1
      },
      searchText: "", //搜索关键字
      lessontypetext: "",
      lessontype: [],
      classstatetext: "", //班级状态
      selectCourseList: [], //课程
      classstate: [], //班级状态数据字典
      courseStatus: [], //课程状态
      subjecttext: "", //科目
      courseId: "", //课程ID
      subject: [], //科目列表
      classlist: [], //班级列表
      enterClassData: null, //进班学员
      studentrowIndex: [], //进班学员标记
      orderForeignTeacherPopupVisible: false, //双师-约名师
      classOrderManagePopupVisible: false, //双师-班级订单
      PreviewResourceComponentVisible: false
    };
  },
  methods: {
    /**
     * 删除班级
     */
    deleteClass(item) {
      this.$confirm("此操作将删除该班级, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          api.classDelete({ classId: item.classId }).then(function(data) {
            if (data.resultCode == 2000) {
              vm.$message({
                message: "删除成功",
                type: "success"
              });
              vm.searchData();
            } else {
              vm.$message.error(data.message);
            }
          });
        })
        .catch(() => {});
    },
    /**确定改变状态 */
    updateCofim() {
      console.log(vm.changeCourseAuth);
      let item = vm.changeCourseAuth.libraryCourseCampusList[0];
      if (item.classCourseAuthorize == null) item.classCourseAuthorize = {};
      item.classCourseAuthorize.isAuthorized = item.isAuthorized ? "1" : "0";
      if (item.isAuthorized) {
        item.availableAuthorizeClassAmount =
          item.availableAuthorizeClassAmount - 1;
      } else {
        item.availableAuthorizeClassAmount =
          item.availableAuthorizeClassAmount + 1;
      }
      api.classcourseauthorizeUpdate(vm.changeCourseAuth).then(function(data) {
        if (data.resultCode == 2000) {
          vm.$message({
            message: "修改成功",
            type: "success"
          });
          vm.dialogFormVisible_coursechange = false;
          vm.dialogFormVisible_course = false;
          vm.searchData();
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    /**取消改变状态 */
    cancel_update() {
      vm.changeCourseAuth.libraryCourseCampusList[0].isAuthorized = !vm
        .changeCourseAuth.libraryCourseCampusList[0].isAuthorized;
      vm.dialogFormVisible_coursechange = false;
    },
    /**改变课件保护状态 */
    checkChange(item) {
      console.log(item);
      if (
        (item.availableAuthorizeClassAmount == 0 &&
          item.classCourseAuthorize == null) ||
        (item.availableAuthorizeClassAmount == 0 &&
          item.classCourseAuthorize.isAuthorized == "0") ||
        item.isNotStatus
      )
        return;
      vm.changeCourseAuth.libraryCourseCampusList = [];
      vm.changeCourseAuth.libraryCourseName = item.libraryCourseName;
      vm.changeCourseAuth.libraryCourseId = item.libraryCourseId;
      vm.changeCourseAuth.isAuth = !item.isAuthorized;
      vm.changeCourseAuth.libraryCourseCampusList.push(item);
      vm.dialogFormVisible_coursechange = true;
    },
    searchCourseName() {
      if (vm.searchCourseLibrary == "") {
        vm.courseListByFull = vm.copyCourseListByFull;
      } else {
        vm.courseListByFull = vm.copyCourseListByFull.filter(item => {
          return item.libraryCourseName.indexOf(vm.searchCourseLibrary) != -1;
        });
      }
    },
    gotoSyllabus(item) {
      console.log(item);
      vm.dialogFormVisible_course = false;
      var path = vm.$store.state.permit["41"].path;
      if (path) {
        vm.isGotoResource = true;
      } else {
        vm.$message({
          message: "无权限，请联系管理员!",
          type: "warning"
        });
        return;
      }
      //传递参数
      vm.$router.push({
        path: path,
        query: {
          resourceId: tool.encode(item.resource.resourceId),
          title: tool.encode(item.libraryCourseName)
        }
      });
    },
    /**课件详情 */
    syllabusDetails(item) {
      if (item.courseType == 5) {
        vm.$refs.classtime.setClassInfo(item);
        vm.$store.dispatch("classtimes/gettimetableList", {
          campusId: vm.$store.state.campusId,
          classId: item.classId,
          courseId: item.coursePackageId
        });
      } else {
        let paras = {
          classId: item.classId,
          campusId: vm.$store.state.campusId
        };
        api.getListAuthorizationOfCourse(paras).then(function(d) {
          // console.log(d)
          if (d.resultCode == 2000) {
            vm.courseListByFull = [];
            vm.copyCourseListByFull = [];
            vm.course_title = item.courseName;
            vm.changeCourseAuth.className = item.className;
            vm.changeCourseAuth.classId = item.classId;
            d.list.forEach(item1 => {
              if (item.classStatusMode != 1) {
                item1.isNotStatus = true;
              }
              item1.isAuthorized =
                item1.classCourseAuthorize &&
                item1.classCourseAuthorize.isAuthorized == "1"
                  ? true
                  : false;
              vm.courseListByFull.push(item1);
            });
            vm.copyCourseListByFull = vm.courseListByFull;
            vm.dialogFormVisible_course = true;
            //   if (item.courseType == 2) {
            // } else {
            //   var path = vm.$store.state.permit["41"].path;
            //   if (path) {
            //     vm.isGotoResource = true;
            //   } else {
            //     vm.$message({
            //       message: "无权限，请联系管理员!",
            //       type: "warning"
            //     });
            //     return;
            //   }
            //   //传递参数
            //   vm.$router.push({
            //     path: path,
            //     query: {
            //       resourceId: tool.encode(d.list[0].resource.resourceId),
            //       title: tool.encode(d.list[0].resource.resourceName),
            //       startOrderBy: item.syllabusStartNum,
            //       endOrderBy: item.syllabusEndNum
            //     }
            //   });
            // }
          }
        });
      }
    },
    /**筛选 */
    selectList(index) {
      if (vm.menu == 1) {
        vm.searchData(index);
      } else {
        vm.selectOverClassData(index);
      }
    },
    /**归档 */
    overClassType(item) {
      let paras = {
        classId: item.classId,
        classStatusMode: 5
      };
      api.updateClassStatusMode(paras).then(function(d) {
        // console.log(d)
        if (d.resultCode == 2000) {
          vm.$message({
            message: "归档成功",
            type: "success"
          });
          vm.searchData(1);
        }
      });
    },
    /**判断是否超过开班时间 */
    isOverTime(item) {
      let endTime = Date.parse(item.endTime + " 23:59:59");
      let currentTime = Date.parse(Date());
      return currentTime > endTime;
    },
    /**切换Tab */
    selectTab(index) {
      vm.menu = index;
      this.pager.pagesize = 10;
      this.subjecttext = "";
      this.courseId = "";
      this.searchText = "";
      this.datetext = [];
      if (index == 1) {
        vm.searchData(1);
      } else {
        vm.selectOverClassData(1);
      }
    },
    selectOverClassData(index) {
      if (index) {
        this.pager.currpage = 1;
      }
      //设置请求校区学员列表参数
      let classlisttemp = []; //临时存放班级列表

      if (this.datetext == null) {
        this.datetext = [];
      }
      let paras = {
        campusId: vm.$store.state.campusId,
        currPage: this.pager.currpage,
        pageSize: this.pager.pagesize,
        subjectId: this.subjecttext,
        courseId: this.courseId,
        keyword: this.searchText,
        classType: 2,
        startTime: this.datetext[0] || "",
        endTime: this.datetext[1] || ""
      }; //设置请求校区班级列表参数

      api
        .getclassList(paras)
        .then(function(data) {
          if (data.result == "操作成功") {
            vm.classlist = [];
            vm.$nextTick(function() {
              //dom更新完毕回调
              classlisttemp = data.list;
              vm.pager.totalnum = data.totalCount;
              //给每个班级初始化学员列表、是否显示学员列表
              for (let i = 0; i < classlisttemp.length; i++) {
                classlisttemp[i].studentlist = [];
                classlisttemp[i].isShow = false;
              }
              vm.classlist = classlisttemp;
            });
            //vm.loadingObj.closeLoading();//关闭加载
          }
          // //进班刷新
          if (vm.enterClassData != null) {
            vm.showStudentList(vm.enterClassData);
          }
        })
        .catch(function(data) {
          //	vm.loadingObj.closeLoading();
        });
    },
    /**
     * 初始化数据
     */
    initData() {
      //获取数据字典
      let dicdata = tool.getItem(lsKey.dict, true);
      this.classstate = [];
      this.courseStatus = [];
      this.lessontype = [];
      this.enterClassData = null;
      this.studentrowIndex = [];
      this.lessontype = dicdata["class_arrangement_type"]; //排课类型数据字典
      this.classstate = dicdata["class_status_mode"]; //班级状态数据字典
      this.courseStatus = dicdata["course_status"]; //课程状态数据字典
      let coursetype = dicdata["course_type"]; //班级状态数据字典
      let student_tuition_mode = dicdata["student_tuition_mode"]; //学员班级状态

      for (let i = 0; i < coursetype.length; i++) {
        this.coursetypeObj[coursetype[i]["value"]] = coursetype[i]["name"];
      }
      for (let i = 0; i < student_tuition_mode.length; i++) {
        if (student_tuition_mode[i]["value"] == 6)
          student_tuition_mode[i]["name"] = "在读";
        this.studenttuitionmode[student_tuition_mode[i]["value"]] =
          student_tuition_mode[i]["name"];
      }

      this.$store.dispatch("commondata/initTeacherlist", {
        campusId: vm.$store.state.campusId
      });
      this.$store.dispatch("commondata/initClassroomlist", {
        campusId: vm.$store.state.campusId
      });
      this.$store.dispatch("commondata/initCoursePakagelist", {
        campusId: vm.$store.state.campusId
      });
      //课程初始化
      api
        .courseList({ campusId: vm.$store.state.campusId, currPage: -1 })
        .then(function(d) {
          // console.log(d)
          if (d.result == "操作成功") {
            let courselist = d.list;
            vm.selectCourseList = courselist.map(function(row) {
              return { name: row.courseName, value: row.courseId };
            });
          }
        });

      let user = tool.getItem(lsKey.user, true);
      let param = { orgId: user.orgId };
      api.getSubjectList(param).then(function(data) {
        //枚举科目列表

        if (data.result == "操作成功") {
          vm.subject = data.list;
        }
      });
      if (vm.menu == 1) {
        this.searchData();
      } else {
        this.selectOverClassData();
      }
    },
    //校区改变
    campusChange(campusId) {
      //获取本校区上课时间

      let param = { campusId: campusId };
      api.getListOfCampus(param).then(function(data) {
        setCampusTime(data.list);
        if (vm.menu == 1) {
          vm.searchData(1);
        } else {
          vm.selectOverClassData(1);
        }

        vm.$refs.createNewClass.init(); //更新班级上课时间
        vm.$store.dispatch("commondata/initTeacherlist", {
          campusId: vm.$store.state.campusId
        });
        vm.$store.dispatch("commondata/initClassroomlist", {
          campusId: vm.$store.state.campusId
        });
        vm.$store.dispatch("commondata/initCoursePakagelist", {
          campusId: vm.$store.state.campusId
        });
      });
    },
    /**
     * 获取列表数据
     */
    searchData(index) {
      if (index) {
        this.pager.currpage = 1;
      }
      //设置请求校区学员列表参数
      let classlisttemp = []; //临时存放班级列表

      if (this.datetext == null) {
        this.datetext = [];
      }
      let paras = {
        campusId: vm.$store.state.campusId,
        currPage: this.pager.currpage,
        pageSize: this.pager.pagesize,
        subjectId: this.subjecttext,
        courseId: this.courseId,
        keyword: this.searchText,
        classStatusMode: this.classstatetext,
        classType: 1,
        startTime: this.datetext[0] || "",
        endTime: this.datetext[1] || ""
      }; //设置请求校区班级列表参数

      api
        .getclassList(paras)
        .then(function(data) {
          if (data.result == "操作成功") {
            vm.classlist = [];
            vm.$nextTick(function() {
              //dom更新完毕回调
              classlisttemp = data.list;
              vm.pager.totalnum = data.totalCount;
              //给每个班级初始化学员列表、是否显示学员列表
              for (let i = 0; i < classlisttemp.length; i++) {
                classlisttemp[i].studentlist = [];
                classlisttemp[i].isShow = false;
              }
              vm.classlist = classlisttemp;
            });
            //vm.loadingObj.closeLoading();//关闭加载
          }
          //进班刷新
          if (vm.enterClassData != null) {
            vm.showStudentList(vm.enterClassData);
          }
        })
        .catch(function(data) {
          //	vm.loadingObj.closeLoading();
        });
    },

    /**
     * 进班后显示进班学生
     */
    entryCall(data) {
      this.enterClassData = data;
      if (vm.menu == 1) {
        this.searchData();
      } else {
        this.selectOverClassData();
      }
    },
    /**
     * 行样式设置
     */
    rowStyle({ row, rowIndex }) {
      for (let i = 0; i < this.studentrowIndex.length; i++) {
        if (rowIndex === this.studentrowIndex[i]) {
          return "color:green";
        }
      }
      return "";
    },
    /**
     * 显示班级学员列表
     */
    showStudentList(item) {
      let $parent = $(".home_content");
      let rem = screen.width / 19.2;
      let position = 1.08;
      let classid = item.classId;
      let curClass;
      let paras = { classId: classid };

      api.getClassStudentList(paras).then(function(data) {
        for (let i = 0; i < data.studentList.length; i++) {
          data.studentList[i].age = tool.minusDate(
            data.studentList[i].birthday
          );
          data.studentList[i].phone = "";
          if (
            data.studentList[i].studentParentEntityList &&
            data.studentList[i].studentParentEntityList.length > 0
          ) {
            data.studentList[i].phone =
              data.studentList[i].studentParentEntityList[0].phone;
          }
        }

        if (data.result == "操作成功") {
          for (let i = 0; i < vm.classlist.length; i++) {
            if (classid == vm.classlist[i].classId) {
              //当前选中班级

              if (data.studentList.length > 0) {
                for (let j = 0; j < data.studentList.length; j++) {
                  //判断哪些学员进班
                  data.studentList[j].studentTuitionModeName = "正常";
                  for (let y = 0; y < vm.courseStatus.length; y++) {
                    if (
                      vm.courseStatus[y].value ==
                      data.studentList[j].studentTuitionMode
                    ) {
                      data.studentList[j].studentTuitionModeName =
                        vm.courseStatus[y].name;
                    }
                  }
                }
                if (vm.enterClassData != null) {
                  let stuId = vm.enterClassData.studentId; //刚进班的学员id
                  let stulist = data.studentList;

                  for (let j = 0; j < stulist.length; j++) {
                    //判断哪些学员进班
                    let sid = stulist[j].studentId;
                    for (let k = 0; k < stuId.length; k++) {
                      if (sid == stuId[k]) {
                        data.studentList[j].enterStyle = "enterstyle";
                        //vm.studentrowIndex.push(j)
                      } else {
                        data.studentList[j].enterStyle = "";
                      }
                    }
                  }
                  vm.setTimer(data.studentList);
                }

                console.log(data.studentList);
                vm.classlist[i].studentlist = data.studentList;
                vm.classlist[i].isShow = true;
                position = 1.08 + i * 2.05;

                $parent.finish().animate({ scrollTop: rem * position }, 500);
              }
            } else {
              if (data.studentList.length > 0) {
                vm.classlist[i].isShow = false;
              }
            }
          }
        }
      });
    },
    /**
     * 定时器
     */
    setTimer(data) {
      setTimeout(function() {
        vm.enterClassData = null;

        for (let i = 0; i < data.length; i++) {
          data[i].enterStyle = "";
        }
      }, 5000);
    },
    /**
     * 收缩学员列表
     */
    shrinkStudentList(item) {
      let classid = item.classId;
      let curClass;
      for (let i = 0; i < this.classlist.length; i++) {
        if (classid == this.classlist[i].classId) {
          curClass = this.classlist[i];
        }
      }
      curClass.isShow = false;
    },

    /**
     * 新建班级
     */
    createNewClass() {
      this.componentname = "新建班级";
      let param = { campusId: vm.$store.state.campusId, id: null };
      this.$store.dispatch("createNewClass/getClassInfoById", param);
    },
    /**
     * 进班
     */
    enterClass(item) {
      this.classinfo = item;
      vm.$refs.studententry.setClassInfo(item);

      this.$store.dispatch("studentEntry/getStudentEntryList", item.classId);
    },
    /**
     * 约名师
     */
    DateTeacher(item) {
      let param = {
        classId: item.classId,
        courseId: item.coursePackageId,
        unappointedSyllabus: 1
      };
      api.courseschedulinglist(param).then(function(data) {
        //排课列表

        if (data.listSyllabus.length > 0) {
          //已有排课

          let curTime = tool.DateToString(new Date(), "yyyy-MM-dd HH:mm");
          let listSyllabus = [];
          for (let i = 0; i < data.listSyllabus.length; i++) {
            if (curTime <= data.listSyllabus[i].startTime) {
              listSyllabus.push(data.listSyllabus[i]);
            }
          }
          if (listSyllabus.length <= 0) {
            vm.$message({
              type: "warning",
              message: "所有课节已超时！"
            });
            return;
          }
          vm.showOrderForeignComponents({
            teacher: {
              visible: true,
              data: { classObj: item, courseObj: listSyllabus }
            },
            syllabus: { visible: false },
            classorder: { visible: false }
          });
        } else {
          //未排课
          vm.$message({
            type: "warning",
            message: "请先排课或取消已约的名师排课！"
          });
        }
      });
    },
    /**
     * 班级订单
     */
    ClassOrder(item) {
      // console.log(item)
      vm.showOrderForeignComponents({
        teacher: { visible: false },
        syllabus: { visible: false },
        classorder: { visible: true, data: item }
      });
    },

    /**
     * 排课列表
     */
    teachingScheduleList(item) {
      vm.$refs.timetablelist.setClassInfo(item);
      this.$store.dispatch("timetableList/gettimetableList", {
        campusId: vm.$store.state.campusId,
        classId: item.classId,
        courseId: item.coursePackageId
      });
    },
    /**
     * 排课
     */
    teachingSchedule(item) {
      let paras = { classId: item.classId, courseId: item.coursePackageId };

      if (item.feiboSyllabusOrderNum) {
        vm.$message({
          type: "warning",
          message: "您已约名师，如重新排课，需要取消已约的名师排课，重新预约！"
        });
        return;
      }

      api.getSyllabusCount(paras).then(function(data) {
        //默认不重排
        item.isReadjust = 0;
        //排课列表
        if (data.listSyllabus == 0) {
          //未排课
          vm.$refs.schedulecalendar.init(item);
          return;
        }
        if (item.classStatusMode != 1 && item.useCourseHour != 0) {
          //已有排课
          vm.$confirm("该班级已排课?", "排课", {
            distinguishCancelAndClose: true,
            confirmButtonText: "继续排课",
            type: "warning"
          })
            .then(() => {
              //继续排课
              vm.$refs.schedulecalendar.init(item);
            })
            .catch(action => {});
        } else {
          //已有排课
          vm.$confirm("该班级已排课?", "排课", {
            distinguishCancelAndClose: true,
            confirmButtonText: "重新排课",
            cancelButtonText: "继续排课",
            type: "warning"
          })
            .then(() => {
              //重新排课
              item.isReadjust = 1;
              vm.$refs.schedulecalendar.init(item);
            })
            .catch(action => {
              if (action == "cancel") {
                //继续排课
                vm.$refs.schedulecalendar.init(item);
              }
            });
        }
      });
    },
    /**
     * 编辑班级
     */
    editorClass(item) {
      let coursePakagelist = vm.$store.state.commondata.coursePakagelist;

      this.componentname = "班级信息编辑";
      let param = {
        campusId: vm.$store.state.campusId,
        id: item.classId,
        courseId: item.coursePackageId
      };
      for (let i = 0; i < coursePakagelist.length; i++) {
        if (coursePakagelist[i].value == item.coursePackageId) {
          param.courseTypeId = coursePakagelist[i].courseTypeId;
        }
      }
      this.$store.dispatch("createNewClass/getClassInfoById", param);
    },
    /**
     * 分页请求
     */
    curChange(val) {
      this.pager.currpage = val;
      if (vm.menu == 1) {
        this.searchData();
      } else {
        this.selectOverClassData();
      }
    },
    /**
     * 页数设置
     */
    pageSizeChange(val) {
      this.pager.pagesize = val;
      if (vm.menu == 1) {
        this.searchData();
      } else {
        this.selectOverClassData();
      }
    },
    /**
     * 班级相册
     */
    classAlbum(item) {
      this.componentname = item.className + "(" + item.classId + ")";
      this.$store.dispatch("classAlbum/getClassAlbumPhone", item.classId);
    },
    /**
     * 班级详情
     */
    showClassInfo(item) {
      vm.$store.dispatch("classdetail/getClassInfo", { classId: item.classId }); //获取进班班级信息
    },
    /**
     * 排课类型
     */
    changeLessonType(val) {
      this.searchData(1);
    },
    /**
     * 班级状态选择
     */
    changeClassState(val) {
      this.searchData(1);
    },
    /**
     * 选择科目
     */
    changeSubject(val) {
      this.searchData(1);
    },
    /**
     * 选择日期
     */
    changeDate(val) {
      if (vm.menu == 1) {
        this.searchData(1);
      } else {
        this.selectOverClassData(1);
      }
    },
    /**
     * 学员详情
     */
    studentDetail(row) {
      let paras = { studentId: row.studentId };
      api.getCourseListByStudentId(paras).then(function(data) {
        if (data.result == "操作成功") {
          vm.studentInfo = row;
          vm.studentInfo.photo =
            vm.studentInfo.photo ||
            require("../../assets/img/common/top_portait.png");

          vm.studentInfo.courseList = [];
          vm.studentInfo.courseList = data.listCourse;
          vm.$store.dispatch("studentmanage/showstudetailsPanel");
          vm.$store.dispatch(
            "studentmanage/setstuId",
            vm.studentInfo.studentId
          );
          vm.$store.dispatch("studentmanage/getstudentInfo");
        }
      });
    },
    /**
     * 课节设置
     */
    classtimesSet(item) {
      //vm.classinfo=item;
      vm.$refs.classtime.setClassInfo(item);
      vm.$store.dispatch("classtimes/gettimetableList", {
        campusId: vm.$store.state.campusId,
        classId: item.classId,
        courseId: item.coursePackageId
      });
      //vm.$store.dispatch('classtimes/showclasstimesDialogPanel');
    },
    /**
     * 控制双师控件显示
     * @param data
     * 	{
     * 		teacher:{visible:true,data:{type:'选填，1/2',classObj:'班级信息',courseObj:'排课列表'}},//type 1-选择课程；2-选名师
     * 		syllabus:{visible:true,data:'班级信息',
     * 		classorder:{visible:true,data:'班级信息'
     * 	}
     */
    showOrderForeignComponents(data) {
      //约名师
      this.orderForeignTeacherPopupVisible = data.teacher.visible;
      if (this.orderForeignTeacherPopupVisible) {
        this.$refs.orderForeignTeacherCom.initBydata(data.teacher.data);
      }
      //排课列表
      if (data.syllabus.visible) {
        vm.$refs.timetablelist.setClassInfo(data.syllabus.data);
        this.$store.dispatch("timetableList/gettimetableList", {
          campusId: vm.$store.state.campusId,
          classId: data.syllabus.data.classId,
          courseId: data.syllabus.data.coursePackageId
        });
      } else {
        this.$store.dispatch("timetableList/hidetimetableListPanel");
      }
      //名师-班级订单
      this.classOrderManagePopupVisible = data.classorder.visible;
      if (this.classOrderManagePopupVisible) {
        if (this.$refs.classOrderManageCom)
          this.$refs.classOrderManageCom.initBydata(data.classorder.data);
        else {
          this.$nextTick(() => {
            this.$refs.classOrderManageCom.initBydata(data.classorder.data);
          });
        }
      }

      if (vm.menu == 1) {
        this.searchData();
      } else {
        this.selectOverClassData();
      }
    },

    /**
     * 课节教参资源预览
     */
    ShowPreviewResourceComponent(data) {
      let classSyllabusId = data.classSyllabus.libraryCourseSyllabusId || "";
      let index = data.index;
      //	router.push("/PreviewResource");
      //	this.$router.push({ path: '/PreviewResource', query: {classSyllabusId: classSyllabusId,index:index}})
      let path = vm.$store.state.permit["44"].path;
      if (!path) {
        tool.message({
          showClose: true,
          message: "当前用户缺少权限",
          type: "warning"
        });
        return;
      }

      let routeData = this.$router.resolve({
        path: path,
        query: { classSyllabusId: classSyllabusId, index: index }
      });
      window.open(routeData.href);

      //				vm.PreviewResourceComponentVisible = data.show;
      //				if(vm.$refs.PreviewResource)
      //				vm.$refs.PreviewResource.init();
    },
    /**
     * 退出预览资源组件
     */
    Exit() {
      vm.$refs.PreviewResource.exit();
      vm.PreviewResourceComponentVisible = false;
    }
  },
  mounted() {
    vm = this;
    let menu = tool.getItem(lsKey.pageState, true); //得到当前用户信息
    console.log(menu);
    vm.menu = menu == null ? 1 : menu.menu;
    this.initData();
  },
  beforeDestroy() {
    console.log(vm.isGotoResource);
    if (vm.isGotoResource) {
      tool.setItem(lsKey.pageState, { menu: vm.menu }, true);
      console.log(tool.getItem(lsKey.pageState, true));
    } else {
      tool.setItem(lsKey.pageState, { menu: 1 }, true);
    }
  },
  watch: {
    enterClassData(val) {
      console.log(val);
    }
  }
};
</script>
<style scoped src="@/style/module/table.css"></style>
<style lang="scss">
@import "@/style/module/utils.scss";
.classpagecontainer {
  display: flex;
  flex-wrap: wrap;
  .strong-tip {
    width: 100%;
    height: 1rem;
    background-color: #3885f8;
    color: #ffffff;
    font-size: 0.16rem;
    border-radius: 0.06rem;
    padding: 0.14rem 0.2rem;
    margin-bottom: 0.2rem;
  }
  .el-dialog-bg {
    border-radius: 0.1rem;
  }
  .el-dialog__body {
    padding: 0.1rem 0.2rem 0.2rem 0.2rem;
  }
  .el-dialog__header {
    padding: 0.15rem 0.15rem 0.1rem;
  }
  .el-dialog__headerbtn {
    position: absolute;
    top: 0.15rem;
    right: 0.2rem;
    padding: 0;
    background: 0 0;
    border: none;
    outline: 0;
    cursor: pointer;
    font-size: 0.16rem;
  }
  .enterstyle {
    color: green;
  }
  .content2 {
    margin: 0 auto;
    min-width: 15.6rem;
    width: 15.6rem;
    .title_tab {
      display: flex;
    }
    .title_item {
      font-size: 0.24rem;
      color: #999999;
      text-shadow: 0.01rem 0 0 currentcolor;
      line-height: 0.6rem;
      cursor: pointer;
    }
    .title_active {
      color: #141414;
    }
    .modelname {
      width: 100%;
      height: 0.6rem;
      font-size: $modelTitleFontSize;
      color: #141414;
      line-height: 0.6rem;
      font-family: "microsoft yahei";
      font-weight: bold;
    }
    .btnClass {
      margin-right: 0px;
      height: 0.36rem !important;
      font-weight: bold;
      box-shadow: 0 0 0.2rem 0 rgba(56, 133, 248, 0.22);
      width: 1.52rem !important;
      border-radius: 0.1rem !important;
      float: right;
      font-size: 0.16rem !important;
      background: #3885f8;
      text-align: center;
      line-height: 0.36rem;
      color: #ffffff;
      cursor: pointer;
    }
    .btnClass:hover {
      background: rgba(56, 133, 248, 0.8);
    }

    .backindex {
      width: 100%;
      height: 1rem;
      .success {
        height: 0.5rem;
        width: 100%;
        text-align: center;
        line-height: 0.5rem;
        font-size: 0.3rem;
      }
      .btn {
        height: 0.5rem;
        width: 100%;
        text-align: center;
        line-height: 0.5rem;
        font-size: 0.3rem;
      }
    }

    .class_li {
      width: 100%;
      height: auto;
      background: #ffffff;
      border: 1px solid #ededed;
      border-radius: 0.1rem;
      margin-top: 0.12rem;
      .li_header {
        width: 100%;
        height: 0.4rem;
        border-bottom: 1px solid #f3f6fb;
        .classtype {
          float: left;
          height: 0.4rem;
          width: 1.9rem;
          text-align: center;
          line-height: 0.4rem;
          font-size: 0.14rem;
          padding-left: 0.1rem;
          span {
            background: #e6e6e6;
            border: 1px solid #cbcbcb;
            padding: 0.01rem 0.2rem;
            border-radius: 1rem;
          }
        }
        .fileType {
          float: left;
          height: 0.4rem;
          width: 2rem;
          line-height: 0.4rem;
          font-size: 0.14rem;
          .text {
            border: 1px solid #cbcbcb;
            padding: 0.01rem 0.2rem;
            border-radius: 0.05rem;
          }
          .label {
            margin-left: 0.1rem;
            font-size: 0.16rem;
            color: #3885f8;
            cursor: pointer;
            text-decoration: underline;
          }
        }
        .operate {
          height: 0.4rem;
          float: right;
          margin-right: 0.5rem;
          line-height: 0.4rem;
          cursor: pointer;
          span {
            float: left;
            color: #999999;
            font-size: 0.16rem;
            text-indent: 0.05rem;
          }
          img {
            float: left;
            width: 0.26rem;
            height: 0.26rem;
            margin-top: 0.07rem;
          }
        }
      }
      .li_body {
        width: 100%;
        height: 1.51rem;
        padding: 0.15rem 0.3rem 0.15rem 0.3rem;
        .rate {
          width: 1.21rem;
          height: 1.21rem;
          border-radius: 100%;
          border: 0px solid #ededed;
          line-height: 1.21rem;
          font-size: 0.3rem;
          float: left;
          margin-left: 0.2rem;
          text-align: center;
        }
        .classino {
          height: 1.21rem;
          float: left;
          margin-left: 0.3rem;
          .item {
            width: 100%;
            height: 0.303rem;
            line-height: 0.303rem;
            font-size: 0.16rem;
            color: #666666;
          }
          .item2 {
            width: 100%;
            height: 0.3025rem;
            line-height: 0.3025rem;
            font-size: 0.16rem;
            color: #666666;
          }
        }
        .classino:nth-child(2) {
          margin-left: 0.2rem;
          width: 4rem;
        }
        .classino:nth-child(3) {
          margin-left: 0.5rem;
          max-width: 2.5rem;
        }
        .verticalline {
          width: 1px;
          height: 0.95rem;
          margin: 0.16rem auto;
          background: #ededed;
        }
        .lessoninfo {
          height: 1.21rem;
          width: 40%;
          float: right;
          .title {
            width: 100%;
            height: 0.3rem;
            line-height: 0.3rem;
            text-align: center;
            color: #999999;
          }
          .progress {
            width: 100%;
            height: 0.7rem;
            line-height: 0.7rem;
            text-align: center;
            font-size: 0.3rem;
            font-weight: bold;
          }
          .progresstext {
            width: 100%;
            height: 0.3rem;
            line-height: 0.3rem;
            text-align: center;
            font-size: 0.15rem;
            color: #999999;
          }
        }
      }
      .studentlist {
        width: 100%;
        border-top: 1px solid #f3f6fb;
        height: auto;
        padding: 0 0.42rem 0 0.42rem;
      }
      .shrink {
        width: inherit;
        height: 0.32rem;
        display: flex;
        justify-content: center;
        align-items: center;
        .shrinkicon {
          width: 0.18rem;
          height: 0.18rem;
          background: url(../../assets/img/common/arrow_up.png);
          background-size: cover;
          position: absolute;
          left: 50%;
          margin-left: -0.16rem;
          opacity: 1;
          cursor: pointer;
        }
      }
    }

    //双师-约名师
    .box-orderForeign {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: #f3f6fb;
      padding: 0 0.7rem;
      overflow-x: hidden;
      overflow-y: auto;
      .box-title {
        width: 100%;
        height: 0.6rem;
        font-size: 0.26rem;
        color: #141414;
        line-height: 0.6rem;
        font-family: "microsoft yahei";
        font-weight: bold;
        .gotoclass:hover {
          cursor: pointer;
        }
      }
    }
    // 双师-约名师-滚动条
    .box-orderForeign::-webkit-scrollbar {
      width: 0.1rem;
      height: 0.1rem;
    }
    .box-orderForeign::-webkit-scrollbar-thumb {
      border-radius: 0.5rem;
      background: #bbbbbb;
    }
    .box-orderForeign::-webkit-scrollbar-track {
      background: #f2f6fc;
    }
    .input_search {
      .el-input__inner {
        background-color: rgb(247, 248, 250);
      }
    }
  }
  .course_tips {
    float: left;
    width: 0.16rem;
    height: 0.16rem;
    margin-left: 0.06rem;
    margin-top: 0.04rem;
    background-image: url(../../assets/img/education_manage/course_tip.png);
  }
  .course_name {
    float: left;
  }
}
</style>
